<template>
  <div  id="main" v-show="visible" :style="{'height':slide_h+'px'}" style="border-radius:3px;overflow-y: auto;">
  <div class="p-tb20">
    <el-row >
    <el-col v-if="this.$store.getters.getConfig()"  >
      <el-col class="text-center">
        <h3 class="p-tb20">APP客户端下载</h3>
      </el-col>
    </el-col>
  </el-row>
  <el-row >
    <el-col >
      <div class="text-center">
        <h4>android</h4>
        <div id="androidQR"  class="p-t10" >
        </div>
        <div class="p-tb5"></div>
        <el-button type="primary" v-if="$store.getters.getConfig().AndroidClientUrl" @click="toopendown($store.getters.getConfig().AndroidClientUrl)">点击下载安卓客户端</el-button>
      </div>
      <div class="p-tb10"></div>
      <div class="text-center">
        <h4>ios</h4>
        <div id="iosQR" class="p-t10">
        </div>
        <div class="p-tb5"></div>
        <el-button v-if="$store.getters.getConfig().IOSClientUrl" type="primary" @click="toopendown($store.getters.getConfig().IOSClientUrl)">点击下载IOS客户端</el-button>
      </div>
    </el-col>
  </el-row>
  </div>
  </div>
</template>
<script>
  var browser = {
    versions: function () {
      var u = navigator.userAgent, app = navigator.appVersion;
      return { //移动终端浏览器版本信息
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
        iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1//是否iPad
      };
    }()
  }
  function isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase();
    console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
    }
    else {
      return false;
    }
  }
  export default {
    inject:["changeActive"],
    data() {
      return {
        visible:false,
        slide_h:window.document.body.offsetHeight,
      }
    },
    methods: {
      init() {
      },
      toopendown(url){
        if(url){
          if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
            window.location.href = url;
          }else {
            if(isWeiXin()){
              this.$toast({
                message:"点击右上角的在浏览器中打开进行下载"
              })
            }else{
              window.location.href=url;
            }
          }
        }else{
          this.$toast({
            message:"敬请期待"
          })
        }
      },
      linkto(path){
        console.log(path);
        this.$router.push(path);
      }
    },
    activated(){
    },
    mounted(){
      setTimeout(()=>{
        this.$nextTick(()=>{
          if(this.$store.getters.getConfig().AndroidClientUrl){
            this.proUtil.createQrCode("androidQR",window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '')+"/downLoadClient",100,100);
          }
          if(this.$store.getters.getConfig().IOSClientUrl){
            this.proUtil.createQrCode("iosQR",window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '')+"/downLoadClient",100,100);
          }
        })
        this.visible=true;
      },1000)
    },
    activated(){
    }
  }
</script>
<style scoped lang="scss"  >
  $height:88px;
  img{
    height:$height;
    width:$height
  }
</style>
